import React from 'react';
import Product from 'service/product-service.jsx';
import MUtil from 'util/mm.jsx';

const _product = new Product();
const _mm = new MUtil();

import './category-selector.scss';

class CategorySelector extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            firstCategoryId: 0,
            firstCategoryList: [],
            secondCategoryId: 0,
            secondCategoryList: []
        }
    }
    componentDidMount() {
        this.loadFirstCategory();
    }
    //这个方法是在propｓ变化的时候触发的
    componentWillReceiveProps(nextProps) {
        let categoryIdChange = this.props.categoryId !== nextProps.categoryId;
        let parentCategoryIdChange = this.props.　parentCategoryIdChange !== nextProps.parentCategoryIdChange;
        if (!categoryIdChange && !parentCategoryIdChange) {
            return;
        }
        //假如只有一级品类
        if (nextProps.parentCategoryId === 8) {
            this.setState({
                firstCategoryId: nextProps.parentCategoryId,
                secondCategoryId: nextProps.categoryId
            }, () => {
                parentCategoryIdChange && this.loadSecondCategory();
            })
        }
        //有两级品类
        else {
            this.setState({
                firstCategoryId: nextProps.categoryId,

            })
        }
    }
    //加载一级分类
    loadFirstCategory() {
        //这个方法，传入一个ID，返回一个列表
        //当传入一级品类ID，则返回一级品类的列表
        //当传入二级品类ID，则返回二级品类的列表
        _product.getCategoryList().then(res => {
            this.setState({
                firstCategoryList: res
            })
        }, errMsg => {
            _mm.errorTips(errMsg);
        });
    }
    //加载二级品类
    loadSecondCategory() {
        _product.getCategoryList(this.state.firstCategoryId).then(res => {
            this.setState({
                secondCategoryList: res
            })
        }, errMsg => {
            _mm.errorTips(errMsg);
        });
    }
    //选择一级品类
    onFirstCategoryChange(e) {
        if (this.props.readOnly) {
            return;
        }
        let newValue = e.target.value || 0;//这个新值是选中的一级品类的值
        this.setState({
            firstCategoryId: newValue,//然后下面清空二级分类       
            secondCategoryId: 0,
            secondCategoryList: []
        }, () => {
            //更新二级品类
            this.loadSecondCategory();
            this.onPropsCategoryChange();
        })
    }
    //选择二级品类
    onSecondCategoryChange(e) {
        if (this.props.readOnly) {
            return;
        }
        let newValue = e.target.value || 0;//这个新值是选中的一级品类的值
        this.setState({
            secondCategoryId: newValue
        }, () => {
            this.onPropsCategoryChange();
        })
    }
    //传给父组件中选中的结果
    onPropsCategoryChange() {
        let categoryChangeable = typeof this.props.onCategoryChange === 'function';
        //如果是有二级品类
        if (this.state.secondCategoryId) {
            categoryChangeable && this.props.onCategoryChange(this.state.secondCategoryId, this.state.firstCategoryId)
        }
        //如果只有一级品类
        else {
            categoryChangeable && this.props.onCategoryChange(this.state.firstCategoryId, 0) //第二个参数是父分类ID，这里是根为0
        }
    }
    render() {
        return (
            <div className="col-md-10">
                <select className="form-control cate-select"
                    value={this.state.firstCategoryId}
                    onChange={e => this.onFirstCategoryChange(e)}
                    readOnly={this.props.readOnly}>
                    <option value=''>请选择一级分类</option>
                    {
                        this.state.firstCategoryList.map(
                            (category, index) => <option value={category.id} key={index}>{category.name}</option>)
                    }
                </select>

                {this.state.secondCategoryList.length ?

                    <select className="form-control cate-select"
                        value={this.state.secondCategoryId}
                        onChange={e => this.onSecondCategoryChange(e)}
                        readOnly={this.props.readOnly}>
                        <option value=''>请选择二级分类</option>
                        {
                            this.state.secondCategoryList.map(
                                (category, index) => <option value={category.id} key={index}>{category.name}</option>)
                        }
                    </select> : null //二级分类长度大于0 显示，否则为null
                }

            </div>
        );
    }
}

export default CategorySelector;